<template>
  <div class="layout">
    <div class='title'>API</div>
    <div class='subTitle'>
      账户默认不开放数据，若要取得数据，请联系我们。ID到个人中心查看，用于区分不同站点。
    </div>
    <div class="layout-content">
      <Row :gutter="40" style="margin-top: 20px;">
        <i-col span="8">
          <div class='con_title'>获取实时数据</div>
          <div class='layout-content-main'>
            <p class='name'>请求地址</p>
            <p class='val'>http://yunlink.027010.cn/OpenAPI/GetReal</p>
            <p class='name'>请求方式</p>
            <p class='val'>Get、Post</p>
            <p class='name'>请求参数</p>
            <p class='val'>sn：序列号</p>
            <p class='val'>pwd：密码</p>
            <p class='val'>id：设备ID</p>
            <p class='name'>响应格式</p>
            <p class='val'>Json</p>
            <p class='name'>请求示例</p>
            <p class='val'>
              <a href="http://yunlink.027010.cn/OpenAPI/GetReal?sn=00000000000&pwd=123456&id=1">http://yunlink.027010.cn/OpenAPI/GetReal?sn=00000000000&pwd=123456&id=1</a>
            </p>
          </div>
        </i-col>
        <i-col span="8">
          <div class='con_title'>获取历史数据</div>
          <div class='layout-content-main'>
            <p class='name'>请求地址</p>
            <p class='val'>http://yunlink.027010.cn/OpenAPI/GetHistory</p>
            <p class='name'>请求方式</p>
            <p class='val'>Get、Post</p>
            <p class='name'>请求参数</p>
            <p class='val'>sn：序列号</p>
            <p class='val'>pwd：密码</p>
            <p class='val'>id：设备ID</p>
            <p class='val'>start：起始日期(yyyy-MM-dd、yyyy-MM-dd HH:mm:ss)</p>
            <p class='val'>end：截止日期(yyyy-MM-dd、yyyy-MM-dd HH:mm:ss)</p>
            <p class='name'>响应格式</p>
            <p class='val'>Json</p>
            <p class='name'>请求示例</p>
            <p class='val'>
              <a href="http://yunlink.027010.cn/OpenAPI/GetHistory?sn=00000000000&pwd=123456&id=1&start2017-8-1&end=2017-8-2">http://yunlink.027010.cn/OpenAPI/GetHistory?sn=00000000000&pwd=123456&id=1&start2017-8-1&end=2017-8-2</a>
            </p>
          </div>
        </i-col>
        <i-col span="8">
          <div class='con_title'>下载历史数据</div>
          <div class='layout-content-main'>
            <p class='name'>请求地址</p>
            <p class='val'>http://yunlink.027010.cn/OpenAPI/Download</p>
            <p class='name'>请求方式</p>
            <p class='val'>Get、Post</p>
            <p class='name'>请求参数</p>
            <p class='val'>sn：序列号</p>
            <p class='val'>pwd：密码</p>
            <p class='val'>id：设备ID</p>
            <p class='val'>start：起始日期(yyyy-MM-dd、yyyy-MM-dd HH:mm:ss)</p>
            <p class='val'>end：截止日期(yyyy-MM-dd、yyyy-MM-dd HH:mm:ss)</p>
            <p class='name'>响应格式</p>
            <p class='val'>Excel表格</p>
            <p class='name'>请求示例</p>
            <p class='val'>
              <a href="http://yunlink.027010.cn/OpenAPI/Download?sn=00000000000&pwd=123456&id=1&start=2017-8-1&end=2017-8-2">http://yunlink.027010.cn/OpenAPI/Download?sn=00000000000&pwd=123456&id=1&start=2017-8-1&end=2017-8-2</a>
            </p>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'dataInterface',
  components: {

  },
  data () {
    return {

    }
  },
  mounted () {
    //
  }
}
</script>
<style>
  .layout{
    padding:0 10px;
  }
  .title{
    margin-bottom: 5px;
    font-size:30px;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  }
  .subTitle{
    font-size:20px;
    margin-bottom: 10px;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  }
  .layout-content{
    border-top:1px solid #ccc;
    padding-top:20px;
    font-size:22px;
  }
  .con_title{
    font-size: 22px;
    padding-bottom: 20px;
    border-bottom:1px solid #ccc;
  }
  .layout-content-main{
    padding-top:20px;
  }
  .name{
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    color:#000
  }
  .val{
    font-size: 14px;
    text-align: left
  }
  .val a{
    text-decoration: underline
  }
</style>
